<template>

  <el-tabs v-model="active">
    <el-tab-pane label="组件属性" name="first">

      <div class="form-config">
        <div class="title">域标题</div>
        <div class="configuration">
          <el-input v-model="store.current.config.title" ></el-input>
        </div>
        <div class="title">标签对齐方式</div>
        <div class="configuration">
          <el-radio-group size="small" v-model="store.current.config.labelPosition">
            <el-radio-button label="left">左对齐</el-radio-button>
            <el-radio-button label="right">右对齐</el-radio-button>
            <el-radio-button label="top">顶部对齐</el-radio-button>
          </el-radio-group>
        </div>
        <div class="title">表单标签宽度</div>
        <div class="configuration">
          <el-input-number v-model="store.current.config.labelWidth" :min="0" :max="200" :step="10"></el-input-number>
        </div>
      </div>

    </el-tab-pane>
    <el-tab-pane label="容器属性" name="second">

        <div class="box-model-config">
          <div class="title">内填充</div>
          <div class="configuration">

            <el-row>

              <el-col :span="4">
                <div class="prop-set-title">
                  上
                </div>
              </el-col>
              <el-col :span="16">
                <el-slider v-model="store.current.boxModelStyle.paddingTop"></el-slider>
              </el-col>
              <el-col :span="4">
                <div class="prop-set-title">
                  {{store.current.boxModelStyle.paddingTop+'px'}}
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="4">
                <div class="prop-set-title">
                  右
                </div>
              </el-col>
              <el-col :span="16">
                <el-slider v-model="store.current.boxModelStyle.paddingRight"></el-slider>
              </el-col>
              <el-col :span="4">
                <div class="prop-set-title">
                  {{store.current.boxModelStyle.paddingRight+'px'}}
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="4">
                <div class="prop-set-title">
                  下
                </div>
              </el-col>
              <el-col :span="16">
                <el-slider v-model="store.current.boxModelStyle.paddingBottom"></el-slider>
              </el-col>
              <el-col :span="4">
                <div class="prop-set-title">
                  {{store.current.boxModelStyle.paddingBottom+'px'}}
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="4">
                <div class="prop-set-title">
                  左
                </div>
              </el-col>
              <el-col :span="16">
                <el-slider v-model="store.current.boxModelStyle.paddingLeft"></el-slider>
              </el-col>
              <el-col :span="4">
                <div class="prop-set-title">
                  {{store.current.boxModelStyle.paddingLeft+'px'}}
                </div>
              </el-col>
            </el-row>

          </div>
        </div>

    </el-tab-pane>
  </el-tabs>

</template>

<script>
  export default {
    inject: ['getStore'],
    data () {
      return {
        active: 'first',
      }
    },
    computed: {
      store () {
        return this.getStore()
      }
    }
  }
</script>

<style lang="scss" scoped>
.form-config,
.box-model-config {
  padding-left: 10px;
}
.form-config .title,
.box-model-config .title {
  line-height: 32px;
  font-size: 14px;
}
.form-config .el-input-number,
.box-model-config .el-input-number {
  line-height: 30px;
}
::v-deep .el-tabs__item[aria-controls] {
  width: 50% !important;
  text-align: center;
}

</style>